<script setup lang="ts">
import { FetchCamera } from "@/service/getData"
import {onMounted, ref} from "vue";

const baseUrl = "http://127.0.0.1:8085";
const { FetchUrl } = FetchCamera();
const token = localStorage.getItem("token");

const imageUrls = ref([]);

const init = async ()=>{
  const response = await FetchUrl(token);
  imageUrls.value = response
      .replace(/[\[\]]/g, '')
      .split(',')
      .map(url => url.trim())
      .filter(url => url.length > 0)
      .map(url => {
        if (!url.startsWith('http')) {
          return `${baseUrl}${url}`;
        }
        return url;
      });
};
onMounted(()=>{
  init();
});
</script>

<template>
  <div class="carousel-container">
    <el-carousel height="100%" motion-blur indicator-position="none">
      <el-carousel-item v-for="(url, index) in imageUrls" :key="index">
        <img
            :src="url"
            :alt="`capture-${url}`"
            class="carousel-image"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.carousel-container {
  width: 100%;
  height: 280px; /* 设置固定高度 */
  overflow: hidden;
}

:deep(.el-carousel) {
  height: 100%;
}

:deep(.el-carousel__container) {
  height: 100% !important;
}

:deep(.el-carousel__item) {
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>